<template>
  <div class="content">
    <!-- 封面 -->
    <div class="cover">
      <h1>
        <span v-if="!reports.edit1" @click="handleEdit1">{{
          report.name
        }}</span>
        <input
          v-else
          ref="input"
          v-model="report.name"
          class="pdf-input"
          style="border: none"
          @blur="reports.edit1 = false"
        />
      </h1>
      <h3>
        报告类型:
        <span v-if="!reports.edit2" @click="handleEdit2">{{
          report.type
        }}</span>
        <input
          v-else
          ref="input2"
          v-model="report.type"
          class="pdf-input mini-input"
          @blur="reports.edit2 = false"
        />
      </h3>
      <h3>
        批准人:
        <span v-if="!reports.edit3" @click="handleEdit3">{{
          report.approver
        }}</span>
        <input
          v-else
          ref="input3"
          v-model="report.approver"
          class="pdf-input mini-input"
          @blur="reports.edit3 = false"
        />
      </h3>
      <h3>
        审核人:
        <span v-if="!reports.edit4" @click="handleEdit4">{{
          report.auditor
        }}</span>
        <input
          v-else
          ref="input4"
          v-model="report.auditor"
          class="pdf-input mini-input"
          @blur="reports.edit4 = false"
        />
      </h3>
      <h3>
        时间:
        <span v-if="!reports.edit5" @click="handleEdit5">{{
          report.dates
        }}</span>
        <input
          v-else
          ref="input5"
          v-model="report.dates"
          class="pdf-input mini-input"
          @blur="reports.edit5 = false"
        />
      </h3>
      <textarea placeholder="可输入多行文本" />
    </div>

    <div class="block tabel1">
      <h1>
        <span v-if="!reports1.edit1" @click="handEdit1">{{
          reportTit.text1
        }}</span>
        <input
          v-else
          ref="inp1"
          v-model="reportTit.text1"
          class="pdf-input"
          @blur="reports1.edit1 = false"
        />
      </h1>
      <table
        class="table table-bordered table-striped table-hover table-responsive"
      >
        <tbody>
          <tr style="background: #f9f9f9">
            <td class="col-xs-2 heads">
              <span v-if="!reports1.edit2" class="hea" @click="handEdit2">{{
                reportTit.text2
              }}</span>
              <input
                v-else
                ref="inp2"
                v-model="reportTit.text2"
                type="text"
                class="inp1 tr1"
                @blur="reports1.edit2 = false"
              />
            </td>
            <td class="col-xs-4" colspan="2">
              <span v-if="!reports1.edit3" @click="handEdit3">--</span>
              <input
                v-else
                ref="inp3"
                v-model="reportTit.text2"
                type="text"
                class="tbodys inp1 tr1"
                @blur="reports1.edit3 = false"
              />
            </td>
            <td class="col-xs-2 heads">
              <span v-if="!reports1.edit4" class="hea" @click="handEdit4">{{
                reportTit.text3
              }}</span>
              <input
                v-else
                ref="inp4"
                v-model="reportTit.text3"
                type="text"
                class="form-control hea text-left tr1 hide inp1"
                @blur="reports1.edit4 = false"
              />
            </td>
            <td class="col-xs-4" colspan="2">
              <span v-if="!reports1.edit5" @click="handEdit5">--</span>
              <input
                v-else
                ref="inp5"
                v-model="reportTit.text2"
                type="text"
                class="tbodys inp1 tr1"
                @blur="reports1.edit5 = false"
              />
            </td>
          </tr>
          <tr>
            <td>
              <span v-if="!reports1.edit6" class="hea" @click="handEdit6">{{
                reportTit.text4
              }}</span>
              <input
                v-else
                ref="inp6"
                v-model="reportTit.text4"
                type="text"
                class="form-control hea text-left hide inp1"
                @blur="reports1.edit6 = false"
              />
            </td>
            <td class="col-xs-2" colspan="2">
              <span v-if="!reports1.edit7" @click="handEdit7">{{
                station_info.operate_capacity
              }}</span>
              <input
                v-else
                ref="inp7"
                v-model="station_info.operate_capacity"
                type="text"
                class="form-control text-left hide inp1"
                @blur="reports1.edit7 = false"
              />
            </td>
            <td>
              <span v-if="!reports1.edit8" class="hea" @click="handEdit8">{{
                reportTit.text5
              }}</span>
              <input
                v-else
                ref="inp8"
                v-model="reportTit.text5"
                type="text"
                class="form-control text-left hide hea inp1"
                @blur="reports1.edit8 = false"
              />
            </td>
            <td colspan="2">
              <span v-if="!reports1.edit9" @click="handEdit9"
                >{{ station_info.kw }}KV</span
              >
              <input
                v-else
                ref="inp9"
                v-model="station_info.kw + 'KV'"
                type="text"
                class="form-control text-left hide inp1"
                @blur="reports1.edit9 = false"
              />
            </td>
          </tr>
          <tr style="background: #f9f9f9">
            <td>
              <span v-if="!reports1.edit10" class="hea" @click="handEdit10">{{
                reportTit.text6
              }}</span>
              <input
                v-else
                ref="inp10"
                v-model="reportTit.text6"
                type="text"
                class="form-control hea tr1 text-left hide inp1"
                @blur="reports1.edit10 = false"
              />
            </td>
            <td colspan="2">
              <span v-if="!reports1.edit11" @click="handEdit11">--</span>
              <input
                v-else
                ref="inp11"
                type="text"
                class="form-control tr1 text-left hide inp1"
                value="00"
                @blur="reports1.edit11 = false"
              />
            </td>
            <td>
              <span v-if="!reports1.edit12" class="hea" @click="handEdit12">{{
                reportTit.text7
              }}</span>
              <input
                v-else
                ref="inp12"
                v-model="reportTit.text7"
                type="text"
                class="form-control hea tr1 text-left hide inp1"
                @blur="reports1.edit12 = false"
              />
            </td>
            <td colspan="2">
              <span v-if="!reports1.edit13" @click="handEdit13">--</span>
              <input
                v-else
                ref="inp13"
                type="text"
                class="form-control tr1 text-left hide inp1"
                value="00"
                @blur="reports1.edit13 = false"
              />
            </td>
          </tr>
          <tr>
            <td>
              <span v-if="!reports1.edit14" class="hea" @click="handEdit14">{{
                reportTit.text8
              }}</span>
              <input
                v-else
                ref="inp14"
                v-model="reportTit.text8"
                type="text"
                class="form-control hea text-left hid inp1"
                @blur="reports1.edit14 = false"
              />
            </td>
            <td colspan="2">
              <span v-if="!reports1.edit15" @click="handEdit15">{{
                station_info.station_type_name
              }}</span>
              <input
                v-else
                ref="inp15"
                v-model="station_info.station_type_name"
                type="text"
                class="form-control text-left hide inp1"
                @blur="reports1.edit15 = false"
              />
            </td>
            <td>
              <span v-if="!reports1.edit16" class="hea" @click="handEdit16">{{
                reportTit.text9
              }}</span>
              <input
                v-else
                ref="inp16"
                v-model="reportTit.text9"
                type="text"
                class="form-control hea text-left hide inp1"
                @blur="reports1.edit16 = false"
              />
            </td>
            <td colspan="2">
              <span v-if="!reports1.edit17" @click="handEdit17">{{
                station_info.property_name
              }}</span>
              <input
                v-else
                ref="inp17"
                type="text"
                class="form-control text-left hide inp1"
                :value="station_info.property_name"
                @blur="reports1.edit17 = false"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="block">
      <h1>
        <span v-if="!reports2.edit1" @click="handEdits1">{{
          reportTit1.text1
        }}</span>
        <input
          v-else
          ref="inps1"
          v-model="reportTit1.text1"
          class="pdf-input"
          @blur="reports2.edit1 = false"
        />
      </h1>
      <h3>
        <span v-if="!reports2.edit2" @click="handEdits2">{{
          reportTit1.text2
        }}</span>
        <input
          v-else
          ref="inps2"
          v-model="reportTit1.text2"
          class="pdf-input pdf-input1"
          @blur="reports2.edit2 = false"
        />
      </h3>
      <div class="d1">
        <p v-if="!reports2.edit3" @click="handEdits3">{{ reportTit1.text3 }}</p>
        <el-input
          v-else
          ref="inps3"
          v-model="reportTit1.text3"
          class="pdf-input pdf-input1"
          @blur="reports2.edit3 = false"
        />
      </div>

      <div id="chart" ref="charts1" class="chart" />
      <table class="tabel2" border="1" cellspacing="0" cellpadding="0">
        <thead style="background: #f9f9f9">
          <tr>
            <td>
              <span v-if="!reports3.edit1" @click="handEdites1()">{{
                tableHead.id
              }}</span>
              <input
                v-else
                ref="inpes1"
                v-model="tableHead.id"
                class="pdf-input pdf-input1"
                @blur="reports3.edit1 = false"
              />
            </td>
            <td>
              <span v-if="!reports3.edit2" @click="handEdites2()">{{
                tableHead.name
              }}</span>
              <input
                v-else
                ref="inpes2"
                v-model="tableHead.name"
                class="pdf-input pdf-input1"
                @blur="reports3.edit2 = false"
              />
            </td>
            <td>
              <span v-if="!reports3.edit3" @click="handEdites3()">{{
                tableHead.Pt_plus
              }}</span>
              <input
                v-else
                ref="inpes3"
                v-model="tableHead.Pt_plus"
                class="pdf-input pdf-input1"
                @blur="reports3.edit3 = false"
              />
            </td>
            <td>
              <span v-if="!reports3.edit4" @click="handEdites4()">{{
                tableHead.Eq_plus
              }}</span>
              <input
                v-else
                ref="inpes4"
                v-model="tableHead.Eq_plus"
                class="pdf-input pdf-input1"
                @blur="reports3.edit4 = false"
              />
            </td>
            <td>
              <span v-if="!reports3.edit5" @click="handEdites5()">{{
                tableHead.power_factor
              }}</span>
              <input
                v-else
                ref="inpes5"
                v-model="tableHead.power_factor"
                class="pdf-input pdf-input1"
                @blur="reports3.edit5 = false"
              />
            </td>
            <td>
              <span v-if="!reports3.edit6" @click="handEdites6()">{{
                tableHead.res
              }}</span>
              <input
                v-else
                ref="inpes6"
                v-model="tableHead.res"
                class="pdf-input pdf-input1"
                @blur="reports3.edit6 = false"
              />
            </td>
          </tr>
        </thead>
        <tbody id="tbody11" />
      </table>
      <h4>本章总结</h4>
      <textarea placeholder="请根据以上数据，编写本章总结..." />
    </div>
    <div class="block">
      <h1>
        <span v-if="!reports4.edit1" @click="handEditt1">{{
          reportTit2.text2
        }}</span>
        <input
          v-else
          ref="inpp1"
          v-model="reportTit2.text1"
          class="pdf-input"
          @blur="reports4.edit1 = false"
        />
      </h1>
      <h3>
        <span v-if="!reports4.edit2" @click="handEditt2">{{
          reportTit2.text2
        }}</span>
        <input
          v-else
          ref="inpp2"
          v-model="reportTit2.text2"
          class="pdf-input pdf-input1"
          @blur="reports4.edit2 = false"
        />
      </h3>
      <div class="d1">
        <span>⚫</span>
        <div style="display: inline-block">
          <span v-if="!reports4.edit3" @click="handEditt3">{{
            reportTit2.text3
          }}</span>
          <el-input
            v-else
            ref="inpp3"
            v-model="reportTit2.text3"
            class="pdf-input pdf-input1"
            @blur="reports4.edit3 = false"
          />
        </div>
      </div>
      <div ref="charts2" class="chart" />
      <h3>
        <span v-if="!reports4.edit4" @click="handEditt4">{{
          reportTit2.text4
        }}</span>
        <input
          v-else
          ref="inpp4"
          v-model="reportTit2.text4"
          class="pdf-input pdf-input1"
          @blur="reports4.edit4 = false"
        />
      </h3>
      <div class="d1">
        <span>⚫</span>
        <div style="display: inline-block">
          <span v-if="!reports4.edit5" @click="handEditt5">{{
            reportTit2.text5
          }}</span>
          <el-input
            v-else
            ref="inpp5"
            v-model="reportTit2.text5"
            class="pdf-input pdf-input1"
            @blur="reports4.edit5 = false"
          />
        </div>
      </div>
      <div ref="charts3" class="chart" />
      <div class="d1">
        <span>⚫</span>
        <div style="display: inline-block">
          <span v-if="!reports4.edit6" @click="handEditt6">{{
            reportTit2.text5
          }}</span>
          <el-input
            v-else
            ref="inpp6"
            v-model="reportTit2.text6"
            class="pdf-input pdf-input1"
            @blur="reports4.edit6 = false"
          />
        </div>
      </div>
      <div style="display: flex">
        <div ref="charts4" class="chart c1" />
        <div ref="charts5" class="chart c2" />
      </div>
      <h3>
        <span v-if="!reports4.edit7" @click="handEditt7">{{
          reportTit2.text7
        }}</span>
        <input
          v-else
          ref="inpp7"
          v-model="reportTit2.text7"
          class="pdf-input pdf-input1"
          @blur="reports4.edit7 = false"
        />
      </h3>
      <div style="margin-bottom: 26px">
        <el-table
          :span-method="arraySpanMethod"
          stripe
          :data="tableData1"
          border
          style="width: 100%"
        >
          <el-table-column prop="device_name" label="设备名称" align="center" />
          <el-table-column prop="total" label="总电量(kW.h)" align="center" />
          <el-table-column prop="total_fee" label="总电费(元)" align="center" />
          <el-table-column prop label="尖" align="center">
            <el-table-column
              prop="jian_power"
              align="center"
              label="尖电量(kW.h)"
            />
            <el-table-column
              prop="jian_fee"
              align="center"
              label="尖电费(元)"
            />
          </el-table-column>

          <el-table-column prop label="峰" align="center">
            <el-table-column
              prop="feng_power"
              align="center"
              label="峰电量(kW.h)"
            />
            <el-table-column
              prop="feng_fee"
              align="center"
              label="峰电费(元)"
            />
          </el-table-column>

          <el-table-column prop label="平" align="center">
            <el-table-column
              prop="ping_power"
              align="center"
              label="平电量(kW.h)"
            />
            <el-table-column
              prop="ping_fee"
              align="center"
              label="平电费(元)"
            />
          </el-table-column>

          <el-table-column prop label="谷" align="center">
            <el-table-column
              prop="gu_power"
              align="center"
              label="谷电量(kW.h)"
            />
            <el-table-column prop="gu_fee" align="center" label="谷电费(元)" />
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-table stripe :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="序号" align="center" />
          <el-table-column prop="name" label="类别" align="center" />
          <el-table-column prop="time" label="时段" align="center" />
          <el-table-column prop="price" label="价格(元)" align="center" />
        </el-table>
      </div>
      <h4>本章总结</h4>
      <textarea placeholder="请根据以上数据，编写本章总结..." />
    </div>
    <div class="block">
      <h1>
        <span v-if="!reports5.edit1" @click="handEdi1">{{
          reportTit3.text1
        }}</span>
        <input
          v-else
          ref="in1"
          v-model="reportTit3.text1"
          class="pdf-input"
          @blur="reports5.edit1 = false"
        />
      </h1>
      <h3>
        <span v-if="!reports5.edit2" @click="handEdi2">{{
          reportTit3.text2
        }}</span>
        <input
          v-else
          ref="in2"
          v-model="reportTit3.text2"
          class="pdf-input pdf-input1"
          @blur="reports5.edit2 = false"
        />
      </h3>
      <div ref="charts6" class="chart" />
      <!-- 后台就一个图表数据 -->
      <!-- <div ref="charts7" class="chart"></div> -->

      <h4>本章总结</h4>
      <textarea placeholder="请根据以上数据，编写本章总结..." />
    </div>
    <div class="block">
      <h1>
        <span v-if="!reports6.edit1" @click="handEdi11">{{
          reportTit4.text1
        }}</span>
        <input
          v-else
          ref="in11"
          v-model="reportTit4.text1"
          class="pdf-input"
          @blur="reports6.edit1 = false"
        />
      </h1>
      <textarea placeholder="请根据以上数据，编写本报告总结..." />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { detailPdf } from '@/api/report'
export default {
  props: ['ids'],
  data() {
    return {
      tableData: [],
      tableData1: [],
      reports: {
        edit1: false,
        edit2: false,
        edit3: false,
        edit4: false,
        edit5: false,
      },
      reports1: {
        edit1: false,
        edit2: false,
        edit3: false,
        edit4: false,
        edit5: false,
        edit6: false,
        edit7: false,
        edit8: false,
        edit9: false,
        edit10: false,
        edit11: false,
        edit12: false,
        edit13: false,
        edit14: false,
        edit15: false,
        edit16: false,
        edit17: false,
      },
      reportTit: {
        text1: '一 项目概况',
        text2: '项目名称',
        text3: '报告日期',
        text4: '站点总容量',
        text5: '电压等级',
        text6: '站点数量',
        text7: '监控点数量',
        text8: '站点类别',
        text9: '用电性质',
      },
      reportTit1: {
        text1: ' 二、用电质量分析',
        text2: '2.1 功率因数分析',
        text3:
          '功率因数是衡量用电系统效率的一个经济指标，它由系统负荷性质决定。目前，商业用户功率因数考核的 标准值为 0.9。功率因数大于 0.9，则力调电费有奖励；功率因数小于 0.9，则力调电费有罚款。',
        text4: '站点总容量',
        text5: '电压等级',
        text6: '站点数量',
        text7: '监控点数量',
        text8: '站点类别',
        text9: '用电性质',
      },
      reportTit2: {
        text1: '三 电量分析',
        text2: '3.1 月用电量分析',
        text3: '站点总电量分析',
        text4: '3.2 尖峰平谷电量分析',
        text5: '站点总览',
        text6: '变压器总览',
        text7: '3.3 电费分析',
        text8: '站点类别',
        text9: '用电性质',
      },
      reports2: {
        edit1: false,
        edit2: false,
        edit3: false,
        edit4: false,
        edit5: false,
        edit6: false,
        edit7: false,
        edit8: false,
        edit9: false,
        edit10: false,
        edit11: false,
        edit12: false,
        edit13: false,
        edit14: false,
        edit15: false,
        edit16: false,
        edit17: false,
      },
      reports3: {
        edit1: false,
        edit2: false,
        edit3: false,
        edit4: false,
        edit5: false,
        edit6: false,
        edit7: false,
      },
      reports4: {
        edit1: false,
        edit2: false,
        edit3: false,
        edit4: false,
        edit5: false,
        edit6: false,
        edit7: false,
      },
      reports5: {
        edit1: false,
        edit2: false,
        edit3: false,
        edit4: false,
        edit5: false,
        edit6: false,
        edit7: false,
      },
      reports6: {
        edit1: false,
      },
      reportTit3: {
        text1: '四、配电环境分析',
        text2: '4.1环境温湿度分析',
      },
      reportTit4: {
        text1: '五、总结',
      },
      report: '',
      power_factor: '',
      tr1: true,
      val1: '',
      station_info: '',
      option: {
        legend: {
          data: [
            {
              name: '',
            },
          ],
          textStyle: {
            color: '#000',
            // ...
          },
          // ...
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C'],
          axisLabel: {
            textStyle: {
              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '',
            data: [120, 200, 150],
            type: 'line',
          },
        ],
      },
      option1: {
        legend: {
          data: [
            {
              name: '',
            },
          ],

          textStyle: {
            color: '#000',
            // ...
          },
          // ...
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25],
            name: '',
          },
        ],
      },
      option2: {
        title: {
          text: '',
          textStyle: {
            // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

            color: 'green',
            fontStyle: 'normal',
            fontWeight: 600,
          },
        },
        tooltip: {
          show: true,
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['A', 'B', 'C', 'D', 'E'],
          orient: 'vertical',
          x: 'right',
          y: 'top',
        },
        series: [
          {
            type: 'pie',
            radius: ['55%', '70%'],

            data: [
              { value: 335, name: 'A' },
              { value: 310, name: 'B' },
              { value: 234, name: 'C' },
              { value: 135, name: 'D' },
              { value: 1548, name: 'E' },
            ],
          },
        ],
      },
      option3: {
        title: {
          text: '',
          textStyle: {
            // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

            color: 'green',
            fontStyle: 'normal',
            fontWeight: 600,
          },
        },
        tooltip: {
          show: true,
        },

        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['A', 'B', 'C', 'D', 'E'],
          orient: 'vertical',
          x: 'right',
          y: 'top',
        },
        series: [
          {
            type: 'pie',
            radius: ['55%', '70%'],

            data: [
              { value: 335, name: 'A' },
              { value: 310, name: 'B' },
              { value: 234, name: 'C' },
              { value: 135, name: 'D' },
              { value: 1548, name: 'E' },
            ],
          },
        ],
      },
      option4: {
        title: {
          text: '',
          textStyle: {
            // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

            color: 'green',
            fontStyle: 'normal',
            fontWeight: 600,
          },
        },
        tooltip: {
          show: true,
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['A', 'B', 'C', 'D', 'E'],
          orient: 'vertical',
          x: 'right',
          y: 'top',
        },
        series: [
          {
            type: 'pie',
            radius: ['55%', '70%'],

            data: [
              { value: 335, name: 'A' },
              { value: 310, name: 'B' },
              { value: 234, name: 'C' },
              { value: 135, name: 'D' },
              { value: 1548, name: 'E' },
            ],
          },
        ],
      },
      option5: {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: [
            {
              name: '',
            },
          ],
          textStyle: {
            color: '#000',
            // ...
          },
          // ...
        },
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C'],
          axisLabel: {
            textStyle: {
              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [10, 22, 28, 43, 49],
            type: 'line',
            stack: 'x',
            name: '',
          },
          {
            data: [5, 4, 3, 5, 10],
            type: 'line',
            stack: 'x',
            name: '',
          },
        ],
      },
      option6: {
        legend: {
          data: [
            {
              name: '',
            },
          ],
          tooltip: {
            // 表示不使用默认的“显示”“隐藏”触发规则。
            show: true,

            trigger: 'axis',

            // show: true, //default true

            showDelay: 0, // 显示延时，添加显示延时可以避免频繁切换

            hideDelay: 50, // 隐藏延时

            transitionDuration: 0, // 动画变换时长

            formatter: function (params) {
              return (
                'X: ' +
                params.data[0].toFixed(2) +
                '<br>Y: ' +
                params.data[1].toFixed(2)
              )
            },
          },
          textStyle: {
            color: '#000',
            // ...
          },
          // ...
        },
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C'],
          axisLabel: {
            textStyle: {
              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '',
            data: [120, 200, 150],
            type: 'line',
          },
        ],
      },
      tableHead: '',
      ele_analyse: '',
    }
  },
  mounted() {
    if (this.ids && this.ids.length > 0) {
      this.getDetails()
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    },
    getEchart() {
      // const chartDom = document.getElementById('chart')
      const chartDom = this.$refs.charts1
      const myChart = echarts.init(chartDom)

      myChart.setOption(this.option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getEchart2() {
      // const chartDom = document.getElementById('chart')
      const chartDom = this.$refs.charts2
      const myChart = echarts.init(chartDom)

      myChart.setOption(this.option1)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getEchart3() {
      // const chartDom = document.getElementById('chart')
      const chartDom = this.$refs.charts3
      const myChart = echarts.init(chartDom)

      myChart.setOption(this.option2)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getEchart4() {
      // const chartDom = document.getElementById('chart')
      const chartDom = this.$refs.charts4
      const myChart = echarts.init(chartDom)
      myChart.setOption(this.option3)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getEchart5() {
      // const chartDom = document.getElementById('chart')
      const chartDom = this.$refs.charts5
      const myChart = echarts.init(chartDom)
      myChart.setOption(this.option4)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getEchart6() {
      // const chartDom = document.getElementById('chart')
      const chartDom = this.$refs.charts6
      const myChart = echarts.init(chartDom)
      myChart.setOption(this.option5)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getEchart7() {
      // const chartDom = document.getElementById('chart')
      const chartDom = this.$refs.charts7
      const myChart = echarts.init(chartDom)
      myChart.setOption(this.option6)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    handleEdit1() {
      this.reports.edit1 = true
      this.$nextTick(() => this.$refs['input'].focus())
    },
    handleEdit2() {
      this.reports.edit2 = true
      this.$nextTick(() => this.$refs['input2'].focus())
    },
    handleEdit3() {
      this.reports.edit3 = true
      this.$nextTick(() => this.$refs['input3'].focus())
    },
    handleEdit4() {
      this.reports.edit4 = true
      this.$nextTick(() => this.$refs['input4'].focus())
    },
    handleEdit5() {
      this.reports.edit5 = true
      this.$nextTick(() => this.$refs['input5'].focus())
    },
    handEdit1() {
      this.reports1.edit1 = true
      this.$nextTick(() => this.$refs['inp1'].focus())
    },
    handEdit2() {
      this.reports1.edit2 = true
      this.$nextTick(() => this.$refs['inp2'].focus())
    },
    handEdit3() {
      this.reports1.edit3 = true
      this.$nextTick(() => this.$refs['inp3'].focus())
    },
    handEdit4() {
      this.reports1.edit4 = true
      this.$nextTick(() => this.$refs['inp4'].focus())
    },
    handEdit5() {
      this.reports1.edit5 = true
      this.$nextTick(() => this.$refs['inp5'].focus())
    },
    handEdit6() {
      this.reports1.edit6 = true
      this.$nextTick(() => this.$refs['inp6'].focus())
    },
    handEdit7() {
      this.reports1.edit7 = true
      this.$nextTick(() => this.$refs['inp7'].focus())
    },
    handEdit8() {
      this.reports1.edit8 = true
      this.$nextTick(() => this.$refs['inp8'].focus())
    },

    handEdit9() {
      this.reports1.edit9 = true
      this.$nextTick(() => this.$refs['inp9'].focus())
    },
    handEdit10() {
      this.reports1.edit10 = true
      this.$nextTick(() => this.$refs['inp10'].focus())
    },
    handEdit11() {
      this.reports1.edit11 = true
      this.$nextTick(() => this.$refs['inp11'].focus())
    },
    handEdit12() {
      this.reports1.edit12 = true
      this.$nextTick(() => this.$refs['inp12'].focus())
    },
    handEdit13() {
      this.reports1.edit13 = true
      this.$nextTick(() => this.$refs['inp13'].focus())
    },
    handEdit14() {
      this.reports1.edit14 = true
      this.$nextTick(() => this.$refs['inp14'].focus())
    },
    handEdit15() {
      this.reports1.edit15 = true
      this.$nextTick(() => this.$refs['inp15'].focus())
    },
    handEdit16() {
      this.reports1.edit16 = true
      this.$nextTick(() => this.$refs['inp16'].focus())
    },
    handEdit17() {
      this.reports1.edit17 = true
      this.$nextTick(() => this.$refs['inp17'].focus())
    },
    handEdits1() {
      this.reports2.edit1 = true
      this.$nextTick(() => this.$refs['inps1'].focus())
    },
    handEdits2() {
      this.reports2.edit2 = true
      this.$nextTick(() => this.$refs['inps2'].focus())
    },
    handEdits3() {
      this.reports2.edit3 = true
      this.$nextTick(() => this.$refs['inps3'].focus())
    },
    handEdites1() {
      this.reports3.edit1 = true
      this.$nextTick(() => this.$refs['inpes1'].focus())
    },
    handEdites2() {
      this.reports3.edit2 = true
      this.$nextTick(() => this.$refs['inpes2'].focus())
    },
    handEdites3() {
      this.reports3.edit3 = true
      this.$nextTick(() => this.$refs['inpes3'].focus())
    },
    handEdites4() {
      this.reports3.edit4 = true
      this.$nextTick(() => this.$refs['inpes4'].focus())
    },
    handEdites5() {
      this.reports3.edit5 = true
      this.$nextTick(() => this.$refs['inpes5'].focus())
    },
    handEdites6() {
      this.reports3.edit6 = true
      this.$nextTick(() => this.$refs['inpes6'].focus())
    },
    handEditt1() {
      this.reports4.edit1 = true
      this.$nextTick(() => this.$refs['inpp1'].focus())
    },
    handEditt2() {
      this.reports4.edit2 = true
      this.$nextTick(() => this.$refs['inpp2'].focus())
    },
    handEditt3() {
      this.reports4.edit3 = true
      this.$nextTick(() => this.$refs['inpp3'].focus())
    },
    handEditt4() {
      this.reports4.edit4 = true
      this.$nextTick(() => this.$refs['inpp4'].focus())
    },
    handEditt5() {
      this.reports4.edit5 = true
      this.$nextTick(() => this.$refs['inpp5'].focus())
    },
    handEditt6() {
      this.reports4.edit6 = true
      this.$nextTick(() => this.$refs['inpp6'].focus())
    },
    handEditt7() {
      this.reports4.edit7 = true
      this.$nextTick(() => this.$refs['inpp7'].focus())
    },
    handEdi1() {
      this.reports5.edit1 = true
      this.$nextTick(() => this.$refs['in1'].focus())
    },
    handEdi2() {
      this.reports5.edit2 = true
      this.$nextTick(() => this.$refs['in2'].focus())
    },
    handEdi11() {
      this.reports6.edit1 = true
      this.$nextTick(() => this.$refs['in11'].focus())
    },
    // 获取pdf详情数据
    getDetails() {
      detailPdf({ report_id: this.ids }).then((res) => {
        if (res.code == 200) {
          this.report = res.data.report
          let a
          if (Number(this.report.report_at.substr(5, 2)) < 10) {
            a = this.report.report_at.substr(6, 1)
          }
          this.report.dates =
            this.report.report_at.substr(0, 4) + '年' + a + '月'
        }
        this.station_info = res.data.station_info
        this.power_factor = res.data.power_factor
        this.option.xAxis.data = this.power_factor.xData
        this.option.series[0].data = this.power_factor.series.data
        this.option.series[0].type = this.power_factor.series.type
        this.option.series[0].name = this.power_factor.legend[0]
        this.option.legend.data[0].name = this.power_factor.legend[0]
        this.tableHead = this.power_factor.tableHead
        this.ele_analyse = res.data.ele_analyse
        this.option1.xAxis.data = this.ele_analyse.month_data.xData
        this.option1.series[0].type = this.ele_analyse.month_data.series.type
        this.option1.series[0].data = this.ele_analyse.month_data.series.data
        this.option1.series[0].name = this.ele_analyse.month_data.legend[0]
        this.option1.legend.data[0].name = this.ele_analyse.month_data.legend[0]
        this.option2.series[0].data = this.ele_analyse.station_pie.series.data
        this.option2.title.text = this.ele_analyse.station_pie.title.text
        this.ele_analyse.station_pie.series.data.forEach((item) => {
          this.option2.legend.data.push(item.name)
        })
        this.option2.series[0].type = this.ele_analyse.group_pie[0].series.type
        this.option3.series[0].data = this.ele_analyse.group_pie[0].series.data
        this.option3.title.text = this.ele_analyse.group_pie[0].title.text
        this.ele_analyse.group_pie[0].series.data.forEach((item) => {
          this.option3.legend.data.push(item.name)
        })
        this.option3.series[0].type = this.ele_analyse.group_pie[0].series.type
        // this.option2.legend.data = this.ele_analyse.station_pie.title
        this.option4.series[0].data = this.ele_analyse.group_pie[1].series.data
        this.option4.title.text = this.ele_analyse.group_pie[1].title.text
        this.ele_analyse.group_pie[1].series.data.forEach((item) => {
          this.option4.legend.data.push(item.name)
        })
        this.option4.series[0].type = this.ele_analyse.group_pie[1].series.type
        this.tableData = this.ele_analyse.scheme_data
        this.tableData1 = this.ele_analyse.fee_data
        this.setInner(this.power_factor.table)
        // 初始化图一
        this.option5.series = res.data.env_analyse.series
        this.option5.xAxis.data = res.data.env_analyse.xData
        this.option5.legend.data = res.data.env_analyse.legend
        this.getEchart()
        this.getEchart2()
        this.getEchart3()
        this.getEchart4()
        this.getEchart5()
        this.getEchart6()
        this.getEchart7()
      })
    },
    // 动态添加表格数据
    setInner(arr) {
      const tbody = document.getElementById('tbody11')
      arr.forEach((item) => {
        const newTr = document.createElement('tr')
        newTr.innerHTML = `<td style="text-align:center;padding:8px">${item.id}</td><td style="text-align:center;padding:8px">${item.name}</td><td style="text-align:center;padding:8px">${item.Pt_plus}</td><td style="text-align:center;padding:8px">${item.Eq_plus}</td><td style="text-align:center;padding:8px">${item.power_factor}</td>
        <td style="text-align:center;padding:8px">${item.res}</td>`
        tbody.appendChild(newTr)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px 40px 20px;
  font-size: 22px;
  // overflow: hidden;
  font-family: '宋体' !important;
  color: #353535 !important;
  span {
    font-family: '宋体' !important;
    color: #353535 !important;
    text-align: center;
  }
  input {
    border: none;
  }
  .c1 {
    border: 1px solid #ddd;
    padding-left: 5px;
    padding-right: 5px;
    width: 46%;
  }
  .c2 {
    border: 1px solid #ddd;
    border-left: 0;
    padding-left: 5px;
    padding-right: 5px;

    width: 46%;
  }
  .tabel1 {
    td {
      width: 13% !important;
      padding: 8px;
      text-align: center;
    }
    .inp1 {
      font-size: 15px;
      width: 80%;
    }
    .tr1 {
    }

    .hea {
      font-size: 22px;
      vertical-align: middle;
      font-weight: bold;
    }
  }
  .d1 {
    ::v-deep .el-input__inner {
      font-size: 15px;
    }
  }
  .td11 {
    color: red;
    font-size: 20px !important;
  }
  .tabel2 {
    border: 1px solid #ddd;
    width: 100%;
    font-size: 20px;
    td {
      text-align: center;
      padding: 8px;
      input {
        width: 50%;
        font-size: 15px !important;
        color: #353535 !important;
      }
    }
  }
  h3 {
    font-size: 30px;
  }

  h4 {
    font-size: 25px;
  }

  .cover {
    width: 100%;
    min-height: 750px;
    text-align: center;
    padding-top: 1px;
    margin-bottom: 300px;
    .pdf-input {
      font-size: 50px;
      color: #000000;
      display: inline-block !important;

      ::v-deep input {
        padding: 10px 0 !important;
        border: 0 !important;
        text-align: center;
        height: 80px !important;
        box-sizing: border-box;
        display: inline-block !important;
        color: #000 !important;
        line-height: 80px !important;
      }

      ::v-deep input:focus {
        border: 1px solid #145ccd !important;
        outline: 0 !important;
        // box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(20 92 205 / 60%) !important;
      }
    }

    .mini-input {
      max-width: 200px !important;
      font-size: 30px !important;
      border: none;
      ::v-deep input {
        text-align: left !important;
        height: 50px !important;
        box-sizing: border-box;
        display: inline-block !important;
        color: #000 !important;
        line-height: 50px !important;
      }
    }

    h1 {
      margin-top: 200px;
      margin-bottom: 400px;
      font-size: 50px;
    }

    textarea {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      padding: 10px 15px;
      border-color: rgba(0, 0, 0, 0.03);
      margin-top: 150px;
    }
  }

  .block {
    margin-top: 100px;

    .pdf-input {
      font-size: 35px;
      color: #000000;
      display: inline-block !important;

      ::v-deep input {
        padding: 10px 0 !important;
        border: 0 !important;
        text-align: left;
        height: 60px !important;
        box-sizing: border-box;
        display: inline-block !important;
        color: #000 !important;
        line-height: 60px !important;
      }

      ::v-deep input:focus {
        border: 1px solid #145ccd !important;
        outline: 0 !important;
        // box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%),
        // 0 0 8px rgb(20 92 205 / 60%) !important;
      }
    }

    .pdf-input1 {
      font-size: 25px;

      ::v-deep input {
        padding: 10px 0 !important;
        border: 0 !important;
        text-align: left;
        height: 40px !important;
        box-sizing: border-box;
        display: inline-block !important;
        color: #000 !important;
        line-height: 40px !important;
      }
    }

    .chart {
      width: 100%;
      height: 300px;
      margin: 20px 0;
    }

    textarea {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      padding: 10px 15px;
      border-color: rgba(0, 0, 0, 0.03);
      margin-top: 20px;
    }
  }
  #dashboard .table {
    border: #333 1px solid;
    margin-bottom: 0px;
  }
  .table-responsive {
    min-height: 0.01%;
    overflow-x: auto;
  }
  .table-bordered {
    border: 1px solid #ddd;
  }
  .table {
    width: 100%;
    margin-bottom: 20px;
  }
  .text-center {
    text-align: center;
  }
  table {
    max-width: 100%;
    background-color: transparent;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
  }
  #dashboard .table .heads {
    font-size: 22px;
    vertical-align: middle;
    font-weight: bold;
  }
  #dashboard .table td {
    font-size: 20px;
    font-family: '宋体';
    border-color: #333;
    vertical-align: middle;
    height: 50px;
  }
  #dashboard .table td {
    border-right-width: 0px;
    border-bottom-width: 0px;
  }

  table td[class*='col-'],
  table th[class*='col-'] {
    display: table-cell;
    float: none;
  }
  .table-bordered td,
  .table-bordered th {
    border: 1px solid #ddd;
  }
  .ts1 {
    display: none !important;
  }
}
</style>
